"use strict";
import * as React from 'react';
const { View, TouchableOpacity, Animated, FlatList } = require('react-native');
const { Tabs, List } = require('antd-mobile');
const { connect } = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
import { commonProps, commonStyles } from "../../assets/styles/common";
import { areaPickStyles } from "../../assets/styles/archive";
import MyText from "../../component/MyText";
import MyIcon from "../../component/icon";
import { SCREEN_WIDTH } from "../../constant";
import MyWebView from "../../component/MyWebView";
class AreaPickPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.onMessage = (data) => {
            alert('定位成功');
        };
        this.onSelectArea = (selectArea) => {
            this.props.dispatch({
                type: 'auth/changeSelectArea',
                payload: { selectArea, pi: 1, ps: 10, notFecthPost: true }
            });
            this.setState({ selectedAreaId: selectArea.id });
        };
        this.goToTab = (currentTab) => {
            this.setState({ currentTab });
            Animated.timing(this.state.tabBarUnderlinePosition, {
                toValue: currentTab * SCREEN_WIDTH / 2,
                duration: 300,
            }).start();
        };
        this.renderTabBar = ({ tabs }) => {
            return (<View style={commonStyles.tabBar}>
                {tabs.map((item, index) => {
                return (<TouchableOpacity key={index} style={commonStyles.tabBarItem} onPress={this.goToTab.bind(this, index)}>
                            {item.icon ? <MyIcon name={item.icon} color={this.state.currentTab === index ? '#DAC228' : '#AEADAD'}/> : null}
                            <MyText style={this.state.currentTab === index ? commonStyles.tabBarItemTextActive : commonStyles.tabBarItemTextNormal}>{item.title}</MyText>
                        </TouchableOpacity>);
            })}
                <Animated.View style={[commonStyles.tabBarUnderline, { left: this.state.tabBarUnderlinePosition }]}/>
            </View>);
        };
        this.renderListItem = (p) => {
            const index = p.index;
            const item = p.item;
            return (<List.Item key={index} extra={this.state.selectedAreaId === item.id ?
                <MyIcon name={'icon-gou'} color='#DAC228'/> : null} onClick={this.onSelectArea.bind(this, item)} style={{ backgroundColor: 'transparent' }}>
                <MyText style={{ color: '#fff' }}>{item.name}</MyText>
                <List.Item.Brief><MyText style={{ color: '#999999' }}>{item.description}</MyText></List.Item.Brief>
            </List.Item>);
        };
        this.renderContent = (props) => {
            return (this.state.currentTab === 0 ? (<FlatList data={this.props.auth.areaList} keyExtractor={(item, index) => item.id} extraData={this.state} renderItem={this.renderListItem}/>) : <MyWebView source={require('../../thirdParty/web/map.html')} onMessage={this.onMessage}/>);
        };
        this.state = {
            currentTab: 0,
            tabBarUnderlinePosition: new Animated.Value(0),
            selectedAreaId: null
        };
    }
    componentDidMount() {
        this.props.dispatch({ type: 'auth/fetchData', payload: { pi: 1, ps: 5 } });
    }
    render() {
        return (<View style={[commonStyles.container, areaPickStyles.container]}>
                <NavigationBar {...commonProps.navBar} rightButton={{ title: '下一步', tintColor: '#D8BB26', handler: Actions.focus }} title={{ title: '选择地点', tintColor: '#fff' }}/>
                
                
                
                
                
                
                
                
                
                

                <FlatList data={this.props.auth.areaList} keyExtractor={(item, index) => item.id} extraData={this.state} renderItem={this.renderListItem}/>
            </View>);
    }
}
export default connect(({ auth }) => ({ auth }))(AreaPickPage);
